<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>-页面设置</title>
    <jsp:include page="../header.jsp"/>
    <style>
        [v-clock] {
            display: none;
        }

        #header {
            height: 36px;
            overflow: visible;
            line-height: 36px;
            color: #888;
            border-bottom: 1px solid #f2f6fd;
        }

        #header span {
            display: inline-block;
            padding-left: 10px;
        }

        #content .inner div {
            float: left;
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #f2f6fd;
            white-space: nowrap;
            padding-left: 10px;
        }

        #content .inner div span {
            padding-left: 10px;
        }

        #icon-list {
            width: 100%;
        }

        #icon-list ul {
            padding-left: 0;
        }

        #icon-list li {
            float: left;
            width: 20px;
            height: 20px;
            position: relative;
            margin-left: 5px;
            margin-bottom: 5px;
            cursor: pointer;
        }

        #icon-list li span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #icon-list li:hover {
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            <ul id="tree" class="easyui-tree"></ul>
        </div>
        <div class="col-xs-5" id="item-edit" v-clock>
            <form id="tree-edit-form" action="" class="form-horizontal mt-10">
                <div class="form-group">
                    <label for="pid" class="col-sm-2 control-label">父级菜单ID</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="pid" placeholder="父级菜单ID" :value="pid" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pname" class="col-sm-2 control-label">父级菜单名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="pname" placeholder="父级菜单名称" :value="pname" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cid" class="col-sm-2 control-label">菜单ID</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="cid" placeholder="菜单ID" :value="cid" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cname" class="col-sm-2 control-label">菜单名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="cname" placeholder="菜单名称" :value="cname"
                               v-model="cname" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label for="url" class="col-sm-2 control-label">菜单URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="url" placeholder="菜单URL" autocomplete="off"
                               :value="url" v-model="url">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">菜单图标</label>
                    <div class="col-sm-6" id="icon-div">
                        <input type="button" value="选择图标" class="btn btn-success mr-10" name="selectIcon"
                               data-type="update">
                        <span :class="['l-btn-icon',iconCls]"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sort" class="col-sm-2 control-label">排列序号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="sort" placeholder="排列序号" autocomplete="off"
                               readonly :value="sort">
                    </div>
                </div>
                <div class="form-group">
                    <label for="desc" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-6">
                        <textarea class="form-control" rows="3" title="" id="desc" :value="desc"
                                  v-model="desc"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="addNav"><i
                                class="fa fa-floppy-o"></i>&nbsp;添加同级节点
                        </button>
                        <button type="button" class="btn btn-primary" id="save" @click="update"><i
                                class="fa fa-floppy-o"></i>&nbsp;
                            保存
                        </button>
                        <button type="button" class="btn btn-danger" id="del" @click="del"><i
                                class="fa fa-trash"></i>&nbsp;
                            删除
                        </button>
                    </div>
                </div>
            </form>
            <form id="addNav-form" action="" class="form-horizontal mt-10 hide">
                <div class="form-group">
                    <label for="cname2" class="col-sm-2 control-label">菜单名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="cname2" placeholder="菜单名称" autocomplete="off"
                               v-model="cname2">
                    </div>
                </div>
                <div class="form-group">
                    <label for="url2" class="col-sm-2 control-label">菜单URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="url2" placeholder="菜单URL" autocomplete="off"
                               v-model="url2">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">菜单图标</label>
                    <div class="col-sm-6" id="icon2-div">
                        <input type="button" value="选择图标" class="btn btn-success mr-10" name="selectIcon"
                               data-type="add">
                        <span :class="['l-btn-icon',icon2]"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sort2" class="col-sm-2 control-label">排列序号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="sort2" placeholder="排列序号" autocomplete="off"
                               readonly :value="sort2">
                    </div>
                </div>
                <div class="form-group">
                    <label for="desc2" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-6">
                        <textarea class="form-control" rows="3" title="" id="desc2" v-model="desc2"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="add" @click="add('child')"><i
                                class="fa fa-plus"
                        ></i>&nbsp;
                            新增
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-5" id="role" v-clock>
            <div id="header">
                <span style="width: 25%">
                    <input class="mgc mgc-primary" type="checkbox" id="checked-all" name="checked-all" title="">
                    <span>权限</span>
                </span>
                <span style="width: 50%">描述</span>
                <span style="width: 20%">修改时间</span>
            </div>
            <div id="content" class="clearfix">
                <div class="inner" v-for="val in role">
                    <div style="width: 25%">
                        <input class="mgc mgc-primary" type="checkbox" name="checked-one" title="" :value="val.id"
                               v-model="checked">
                        <span>{{val.role}}</span>
                    </div>
                    <div style="width: 50%">{{val.instruction}}</div>
                    <div style="width: 20%">{{val.updatedTime}}</div>
                </div>
            </div>
            <div class="clearfix mt-20 hide" id="icon-list">
                <h3>请选择图标</h3>
                <ul class="clearfix">
                    <li v-for="item in icons" :title="item.instructions" :data-name="item.icon">
                        <span :class="['show-icon',item.icon]"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<jsp:include page="../footer.jsp"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Vue/vue.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/custom/page-setting.js?v=1.1"></script>
</body>
</html>
